<template>
    <div id="Box">
        <div :id="show ? 'show' : 'main'" :ref="show ? '' : 'myRef'">
            <el-empty :image-size="150" description="暂无数据">
                <template #image>
                    <img style="transform: translateX(12%)" src="/static/noData.png" alt="" />
                </template>
            </el-empty>
        </div>
        <el-button size="small" @click="ExportData">导出</el-button>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import * as echarts from 'echarts/core';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
} from 'echarts/components';
import { PieChart } from 'echarts/charts';

echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
    PieChart
]);
import { export2Img } from '@/utils/utils';
const Props = defineProps<{
    Item: any;
}>();
const show = ref(false);

const myRef = ref();
onMounted(() => {
    const myChart = echarts.init(myRef.value);
    const option = {
        title: {
            text: Props.Item.title,
            left: 'left'
        },
        tooltip: {
            trigger: 'item'
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {}
            }
        },
        series: [
            {
                type: 'pie',
                radius: '75%',
                data: Props.Item.data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    normal: {
                        position: '',
                        textStyle: {
                            fontSize: 20
                        }
                    }
                }
            }
        ]
    };
    option && myChart.setOption(option);
    nextTick(() => {
        myChart.resize();
    });
    window.onresize = function () {
        myChart.resize();
    };
});

const ExportData = () => {
    switch (Props.Item.title) {
        case '客户标签':
            export2Img(myRef.value, '客户标签');
            break;
        case '点赞时间段':
            export2Img(myRef.value, '点赞时间段');
            break;
        case '浏览时间段':
            export2Img(myRef.value, '浏览时间段');
            break;
    }
};
</script>

<style lang="scss" scoped>
#Box {
    display: flex;
    width: 100%;
    height: 100%;
    background: white;
    padding: 10px;
    box-sizing: border-box;
    position: relative;

    #main {
        width: 100%;
        height: 100%;
    }

    .el-button {
        position: absolute;
        width: 64px;
        height: 36px;
        right: 10px;
        top: 10px;
        border-radius: 4px;
        border: 1px solid #eaeaea;
        box-sizing: border-box;
    }
}
</style>
